<template>
	<view class="checkLogistics">
		<logistics :wlInfo="wlInfo"></logistics>
		<view class="recommend">
			<view class="recommend-title" style="background-image: url(../../../static/mine/henxian.png);">
				<text>猜你喜欢</text>
			</view>
			<view class="recommend-box">
				<view class="recommend-shop-box" v-for="(item,index) in shopList" :key='index'>
					<image style="width: 100%;height: 298rpx;border-radius: 20rpx 20rpx 0 0;" :src="item.img" mode="">
					</image>
					<text class="recommend-shop-box-title">{{item.text}}</text>
					<view class="integral">
						<text>{{item.integral}}积分</text>
						<text>{{index.numPeople}}人已兑换</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import logistics from '@/components/xinyu-logistics/xinyu-logistics.vue'
	export default {
		components: {
			logistics
		},
		data() {
			return {
				shopList: [{
					img: require('../../../static/mine/maoyi.png'),
					text: '潮牌国潮港风长针衫高领毛衣 休闲修身款',
					integral: '3000',
					numPeople: '63'
				}, {
					img: require('../../../static/mine/maoyi.png'),
					text: '潮牌国潮港风长针衫高领毛衣 休闲修身款',
					integral: '3000',
					numPeople: '63'
				}],
				wlInfo: {
					delivery_status: 1, //快递状态 1已签收 2配送中
					post_name: '韵达快递', //快递名称
					logo: 'https://cdn.kuaidi100.com/images/all/56/yunda.png', //快递logo
					exp_phone: '95546', //快递电话
					post_no: '4304678557725', //快递单号
					addr: '江西省南昌市青云谱区', //收货地址
					//物流信息
					list: [{
							"time": "2020-04-12 13:00:57",
							"timeArr": ['2020-04-12', '13:00:57'],
							"context": "江西南昌青云谱区 快件已被 丰巢智能柜 代签收。",
							"location": ""
						},
						{
							"time": "2020-04-12 12:58:53",
							"timeArr": ['2020-04-12', '12:58:53'],
							"context": "江西南昌青云谱区 进行派件扫描；派送业务员：张三；联系电话：88888888888",
							"location": ""
						},
						{
							"time": "2020-04-11 15:45:44",
							"timeArr": ['2020-04-11', '15:45:44'],
							"context": "江西南昌分拨中心 从站点发出，本次转运目的地：江西南昌青云谱区",
							"location": ""
						},
						{
							"time": "2020-04-11 15:08:45",
							"timeArr": ['2020-04-11', '15:08:45'],
							"context": "江西南昌分拨中心 在分拨中心进行卸车扫描",
							"location": ""
						},
						{
							"time": "2020-04-10 17:42:41",
							"timeArr": ['2020-04-10', '17:42:41'],
							"context": "浙江义乌分拨中心 进行装车扫描，发往：江西南昌分拨中心",
							"location": ""
						},
						{
							"time": "2020-04-10 17:39:38",
							"timeArr": ['2020-04-10', '17:39:38'],
							"context": "浙江义乌分拨中心 在分拨中心进行称重扫描",
							"location": ""
						},
						{
							"time": "2020-04-10 16:02:46",
							"timeArr": ['2020-04-10', '16:02:46'],
							"context": "浙江义乌城西公司 进行下级地点扫描，发往：江西南昌地区包",
							"location": ""
						},
						{
							"time": "2020-04-10 15:48:42",
							"timeArr": ['2020-04-10', '15:48:42'],
							"context": "浙江义乌城西公司城西营销部 进行揽件扫描",
							"location": ""
						}
					]
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.recommend {
		margin-top: 60rpx;
		width: 100%;
		padding: 0 40rpx;

		.recommend-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.recommend-shop-box {
				padding-bottom: 20rpx;
				width: 45%;
				height: auto;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 40rpx;
				display: flex;
				flex-direction: column;

				.recommend-shop-box-title {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
					padding: 20rpx;
				}

				.integral {
					padding: 0 20rpx;

					text:first-child {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FF7200;
					}

					text:last-child {
						font-size: 20rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						margin-left: 20rpx;
					}
				}
			}
		}

		.recommend-title {
			margin-bottom: 40rpx;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: 172px 2px;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF7200;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
